<template>
	<view class="page-content">
		<view class="flex flex-column classify-wrap">
			<view class="flex-item flex flex-middle classify-item" v-for="(item,index) in dataList"
				@click="classifyTap(index)">
				<image :src="item.src" mode="widthFix" class="bg"></image>
				<view class="flex-item">{{ item.name }}</view>
				<view class="iconfont icon-youjiantou"></view>
			</view>
			<view class="flex-item flex flex-middle classify-item" @click="handleClick">
				<image src="../../static/ecology/img2.png" mode="widthFix" class="bg"></image>
				<view class="flex-item">植被养护</view>
				<view class="iconfont icon-youjiantou"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					src: '../../static/ecology/img3.png',
					name: "数字两河",
					value: 1
				}, {
					src: '../../static/ecology/img1.png',
					name: "数字蛮汗山",
					value: 2
				}, {
					src: '../../static/ecology/img2.png',
					name: "数字二道凹",
					value: 3
				}]
			}
		},
		onLoad() {

		},
		methods: {
			classifyTap(i) {
				let item = this.dataList[i]
				uni.navigateTo({
					url: '../map/map?region=' + item.value + "&title=" + item.name,
				});
			},
			handleClick() {
				uni.navigateTo({
					url: '/pages/attendance/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classify-wrap {}

	.classify-item {
		position: relative;
		width: 750upx;
		padding: 0 40upx 0 30upx;
		min-height: 320upx;
		margin-bottom: 10upx;
		box-sizing: border-box;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			z-index: -1;
		}

		.flex-item {
			font-size: 72upx;
			color: #FFFFFF;
			line-height: 0;
		}

		.iconfont {
			font-size: 55upx;
			color: #fff;
		}
	}
</style>
